import React from 'react';
import {Utils} from '../../utils/Utils';
import {GRID_PARAM} from './GridTableUtils';
import GridRow from './GridRow';

export default class GridTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {ok:false,data:{}};
    }

    componentWillMount(){
        var orderBy = this.props.orderBy || {};
        var curPage = this.props.curPage;
        var pageSize = this.props.pageSize || GRID_PARAM.PAGE_SIZE;
        var url = this.props.url;

        var onBefore = this.props.onBefore || null;
        if(typeof onBefore === 'function'){
            onBefore();
        }

        var o = Utils.createPageRequest(curPage,pageSize,orderBy.name,orderBy.type);
        var payload = this.props.payload || null;
        if(payload){
            o.payload = payload;
        }

        var that = this;
        Utils.ajaxPost(url,JSON.stringify(o),
            function(data){
                console.log("send ajax...")
                that.setState({ok:true,data:data});
                console.log("send ajax end")
            });
    }

    render() {
        if(!this.state.ok){
           return <span>loading...</span>;
        }
        var data = this.state.data.data;
        var pageCount = this.state.data.pageCount || 0;
        var pageNow = this.state.data.curPage || 0;
        var totalCount = this.state.data.totalCount || 0;
        var pageSize = this.state.data.pageSize || 10;

        console.log("render--------" + JSON.stringify(data))
        var titles = this.props.titles;
        var cols = this.props.cols;
        var showpage = this.props.showPage || true;
        var id = this.props.id;
        var pageToShow = 5;
        var ti = parseInt((1 + pageNow - pageToShow) / 2,10);
        return (
         <table id={id} className='grid-table' align='center' border="0" bordercolor='#000000' cellSpacing="0" cellPadding="16">
                <thead>
                <tr>
                    {
                        titles.map((item,index)=>{
                            return <td key={index}>{item.name}</td>
                        })
                    }
                </tr>
                </thead>
                <tbody>
                    {
                        data && data.map((di,index)=>{
                            return <GridRow key={index} index={index} param={cols} data={di}/>
                        })
                    }
                </tbody>
             {showpage&&<tfoot>
                    <tr>
                        <td colSpan="100" valign='middle' align='center' className='grid-table-page'>
                            <div className='div_page'>
                                {
                                    pageNow > 1 && <a href="javascript:_go(1,{id});">【首页】</a>
                                }
                                {
                                    pageNow > pageToShow + 1 && <a href="javascript:_go(1,{id});">【1】</a>
                                }
                                {

                                    pageNow > pageToShow + 2 && <div>
                                        <font color="#2d5959">..</font>
                                        <a href="javascript:_go(' + ti + ',{id});">【{ti}】</a>
                                        <font color="#2d5959">..</font>
                                    </div>
                                }
                                {/*{*/}
                                    {/*var list = ()=>{for(var i = pageNow - pageToShow;i < pageNow + pageToShow; i ++){*/}
                                    {/*return <div>*/}
                                        {/*<span>【{i}】</span>*/}
                                            {/*<a href="javascript:_go({i},{id});">【{i}】</a>*/}
                                    {/*</div>;*/}
                                    {/*}*/}
                                {/*}*/}
                                {/*}*/}


                                {
                                    pageNow < pageCount - pageToShow && <a href="javascript:_go({pageCount},{id});">【{pageCount}】</a>
                                }
                                {
                                    pageNow < pageCount && <a href='javascript:_go({pageCount},{id});'>【尾页】</a>
                                }
                                共{pageCount}页&nbsp;共{totalCount}条&nbsp;每页
                                <select><option>10</option><option>20</option></select>条
                            </div>
                        </td>
                    </tr>
                </tfoot>
             }
            </table>
        );
    }

    componentDidUpdate(){
        var data = this.state.data;
        var onAfter = this.props.onAfter || null;
        if(typeof onAfter === 'function'){
            onAfter(data);
        }
    }
}
